import React, { Component } from 'react'
import { Container, Content, Item, Toast, Root, Input } from 'native-base'
import { View, Text, TouchableOpacity, TextInput } from 'react-native'
import { Actions } from 'react-native-router-flux'
import HeaderWhite from '../../../components/header/headerWhite'
import Iconfont from '../../../components/iconfont'
import commonStyle from '../../../libs/commonStyle'
import pxToDp from '../../../libs/pxToDp'
import API from '../../../api/request'
import Timer from '../../../libs/timer'

import { connect } from 'react-redux' // 引入connect函数
import * as userAction from '../../../redux/actions/user'

class BindPhone extends Component {
	constructor(props) {
		super(props)
		this.state = {
			mobile: '',
			vcode: '',
			vcodeText: '获取验证码',
			duration: 0
		}
	}
	// 获取验证码
	async getVcode() {
		let url = '/api/external/sendSms'
		let res = await API.get(url, {
			mobile: this.state.mobile
		})
		if (!res || res.code !== '200') {
			this.showMessage('发生错误，请稍后再试')
		}
	}

	async validVcode() {
		if (!this.validMobile()) return
		if (!this.state.vcode) return

		let url = '/api/external/sms/verify'
		let res = await API.get(url, {
			mobile: this.state.mobile,
			code: this.state.vcode
		})
		if (res && res.code === '200') {
			this.props.isUpdateUserInfo && this.props.isUpdateUserInfo({
				mobile: this.state.mobile
			})
			Actions.pop()
		} else {
			this.showMessage(res.message || '绑定失败')
		}
	}
	validMobile () {
		if (!this.state.mobile) {
			this.showMessage('手机号不能为空') 
			return
		}
		if (this.state.mobile.length !== 11) {
			this.showMessage('请输入正确的手机号')
			return 
		}
		return true
	}
	showMessage(text) {
		Toast.show({
			text: text,
			textStyle: {
				textAlign: 'center'
			},
			duration: 1000,
			type: 'warning'
		})
	}
	onVcode() {
		if (this.state.duration) return
		if (this.validMobile()){
			this.getVcode()
			// 开启倒计时
			new Timer({
				onRunning: params => {
					this.setState({
						vcodeText: params.status,
						duration: params.duration
					})
				}
			})
		}
		
	}
	render() {
		return (
			<Root>
				<Container>
					<HeaderWhite title="绑定手机号" hasLeft />
					<Content>
						<Text
							style={[
								commonStyle.colorTips,
								commonStyle.p20,
								commonStyle.mt30
							]}
						>
							请输入你的手机号，获取验证码
						</Text>
						<Item>
							<Iconfont name="lc_icon_phone_line" size={18} />
							<Input
								keyboardType='numeric'
								style={{ width: '100%', fontSize: pxToDp(34) }}
								placeholderTextColor={'#A5A5A5'}
								placeholder="请输入手机号"
								onChangeText={val => {
									this.setState({
										mobile: val
									})
								}}
							/>
						</Item>
						<Item>
							<View
								style={[
									commonStyle.flexRow,
									commonStyle.flexVerticalCenter
								]}
							>
								<View
									style={[
										commonStyle.flexItem,
										commonStyle.flexRow,
										commonStyle.flexVerticalCenter
									]}
								>
									<Iconfont name="yanzhengma1" size={20} />
									<Input
										style={{ width: '100%', fontSize: pxToDp(34) }}
										placeholderTextColor={'#A5A5A5'}
										placeholder="请输入验证码"
										onChangeText={val => {
											this.setState({
												vcode: val
											})
										}}
									/>
								</View>
								<TouchableOpacity
									activeOpacity={1}
									onPress={this.onVcode.bind(this)}
									style={[
										commonStyle.borderLeft,
										commonStyle.flexCenter,
										commonStyle.h100,
										commonStyle.pl10,
										commonStyle.pr10
									]}
								>
									<Text
										style={[
											this.state.duration > 1
												? commonStyle.colorTips
												: commonStyle.activeColor
										]}
									>
										{this.state.vcodeText}
									</Text>
								</TouchableOpacity>
							</View>
						</Item>
						<TouchableOpacity
							activeOpacity={1}
							onPress={this.validVcode.bind(this)}
							style={[
								this.state.mobile && this.state.vcode
									? commonStyle.activeBackgroundColor
									: commonStyle.backgroundColorGray,
								commonStyle.flexCenter,
								commonStyle.m20,
								commonStyle.p30,
								commonStyle.circle10,
								commonStyle.mt50
							]}
						>
							<Text
								style={[
									this.state.mobile && this.state.vcode
										? commonStyle.colorWhite
										: commonStyle.colorGray
								]}
							>
								绑定
							</Text>
						</TouchableOpacity>
					</Content>
				</Container>
			</Root>
		)
	}
}

export default connect(
	state => ({
		// user: state.user.user
	}),
	dispatch => ({
		isUpdateUserInfo: (user) => dispatch(userAction.isUpdateUserInfo(user)),
		getUserInfo: () => dispatch(userAction.userInfo())
	})
)(BindPhone)
